<template>
	<view class="change-password-container">
		<el-form ref="passwordForm" :model="form" :rules="rules" label-position="top" class="password-form">
			<el-form-item label="原密码" prop="oldPassword">
				<el-input v-model="form.oldPassword" type="password" placeholder="请输入原密码" show-password clearable />
			</el-form-item>

			<el-form-item label="新密码" prop="newPassword">
				<el-input v-model="form.newPassword" type="password" placeholder="请输入新密码(6-20位字母数字组合)" show-password
					clearable />
			</el-form-item>

			<el-form-item label="确认新密码" prop="confirmPassword">
				<el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入新密码" show-password
					clearable />
			</el-form-item>

			<el-form-item>
				<el-button type="primary" class="submit-btn" :loading="loading" @click="submitForm">
					确认修改
				</el-button>
			</el-form-item>
		</el-form>
	</view>
</template>

<script>
	import {
		updateData
	} from '@/axios/http';
	import {
		ref
	} from 'vue';
	import {
		ElMessage,
		ElInput,
		ElButton,
		ElForm,
		ElFormItem
	} from 'element-plus';

	export default {
		components: {
			ElInput,
			ElButton,
			ElForm,
			ElFormItem
		},
		setup() {
			const passwordForm = ref(null);
			const loading = ref(false);

			const form = ref({
				oldPassword: '',
				newPassword: '',
				confirmPassword: ''
			});

			// 验证确认密码是否一致
			const validateConfirmPassword = (rule, value, callback) => {
				if (value !== form.value.newPassword) {
					callback(new Error('两次输入的密码不一致'));
				} else {
					callback();
				}
			};

			const rules = ref({
				oldPassword: [{
						required: true,
						message: '请输入原密码',
						trigger: 'blur'
					},
					{
						min: 6,
						max: 20,
						message: '密码长度在6到20个字符',
						trigger: 'blur'
					}
				],
				newPassword: [{
						required: true,
						message: '请输入新密码',
						trigger: 'blur'
					},
					{
						min: 6,
						max: 20,
						message: '密码长度在6到20个字符',
						trigger: 'blur'
					},
					{
						pattern: /^(?=.*[a-zA-Z])(?=.*\d).{6,20}$/,
						message: '密码必须包含字母和数字',
						trigger: 'blur'
					}
				],
				confirmPassword: [{
						required: true,
						message: '请确认新密码',
						trigger: 'blur'
					},
					{
						validator: validateConfirmPassword,
						trigger: 'blur'
					}
				]
			});

			// 提交表单
			const submitForm = () => {
				passwordForm.value.validate(async (valid) => {
					if (!valid) {
						return false;
					}

					loading.value = true;

					try {
						// 这里替换为你的实际API调用
						// const res = await changePasswordApi({
						//   oldPassword: form.value.oldPassword,
						//   newPassword: form.value.newPassword
						// });

						let data = {
							userId: uni.getStorageSync('LoginUser').userId,
							oldPassword: form.value.oldPassword,
							newPassword: form.value.newPassword
						}
						console.log("要发送的数据",data)
						const res = await updateData('/pass',data)
						
						console.log("返回的数据",res)
							
						if(res.data.success){
							ElMessage.success('密码修改成功');
							// 清空表单
							form.value = {
								oldPassword: '',
								newPassword: '',
								confirmPassword: ''
							};
							uni.navigateBack();
						}else{
							ElMessage.error(res.data.message);
						}

						// 模拟API请求
						// await new Promise(resolve => setTimeout(resolve, 1000));

						

						

						// 返回上一页或跳转到其他页面
						

					} catch (error) {
						ElMessage.error(error.message || '密码修改失败');
					} finally {
						loading.value = false;
					}
				});
			};

			return {
				passwordForm,
				form,
				rules,
				loading,
				submitForm
			};
		}
	};
</script>

<style scoped>
	.change-password-container {
		padding: 40rpx;
		min-height: 100vh;
		background-color: #f5f7fa;
	}

	.password-form {
		background-color: #fff;
		padding: 40rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);
	}

	.submit-btn {
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
	}

	/* 适配小程序环境 */
	:deep(.el-form-item__label) {
		font-size: 28rpx !important;
		line-height: 1.5 !important;
		padding-bottom: 10rpx !important;
	}

	:deep(.el-input__inner) {
		height: 80rpx !important;
		line-height: 80rpx !important;
		font-size: 28rpx !important;
	}

	:deep(.el-input__wrapper) {
		padding: 0 20rpx !important;
	}
</style>